<div id="app" v-cloak>
    <div class="flex-column flex-content-center">
        <div class="padding20">
            <el-scrollbar height="83vh" width="100%">
                <el-form :model="form" ref="form" :rules="rules" label-width="auto" style="width: 700px;margin-top: 20px">
                    <el-form-item label="手机号码" prop="username">
                        <el-input v-model="form.username" placeholder="请填写手机号码" style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="form.nickname" placeholder="请填写昵称" style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.password" placeholder="填写为修改密码" show-password style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="头像" prop="avatar">
                        <el-upload
                                class="avatar-uploader"
                                :data="uploaderParameter"
                                :action="uploadurl"
                                :show-file-list="false"
                                :on-success="(response,uploadFile)=>handleFileSuccess(response,uploadFile,`avatar`)"
                        >
                            <img v-if="form.avatar" :src="getImg(form.avatar)" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                        <el-button style="margin-left: 20px" type="primary" color="#626aef" @click="handleShowAttachment(`avatar`)">选择图片</el-button>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input  v-model="form.email" placeholder="请填写邮箱" style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="选择分组" prop="group">
                        <el-cascader
                                v-model="additional.group"
                                placeholder = "请选择分组"
                                :options="groups"
                                :show-all-levels="false"
                                :props="{
  checkStrictly: true
}"
                                style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="状态" >
                        <el-radio-group v-model="form.status">
                            <el-radio :value="1">正常</el-radio>
                            <el-radio :value="0">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>
        <div class="flex-row top10 flex-content-end">
            <div style="width: 95%">
                <el-button type="primary" color="#626aef" @click="onSubmit">保存</el-button>
                <el-button  @click="handleCancel">取消</el-button>
            </div>
        </div>
    </div>
</div>
